<template>
  <div class="icons">
    <swiper :options="swiperOption">
      <swiper-slide v-for="(icons,index) of pages" :key="index">
        <div class="icon"  v-for="item of icons" :key="item.id">
          <img :src="item.imgUrl">
          <p v-html="item.desc"></p>
        </div>
      </swiper-slide>
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>
<script>
  export default {
    name: 'HomeIcons',
    props:{
      icons:Array
    },
    data () {
      return {
        swiperOption:{
          autoplay:false
        }
      }
    },
    //计算属性根据其他的一些属性计算出来生成一组新的结果
    computed:{
      pages () {
        const pages = []
        //item 循环项   index  循环项对应的下标
        this.icons.forEach((item,index) =>{
          //page 指的是当前下标对应的数据应该展示在轮播图的第几页
          const page=Math.floor(index/8)
          if(!pages[page]){
            pages[page]=[]
          }
          pages[page].push(item)
        })
        return pages
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../static/css/varibles.styl"
  @import "../../../../static/css/mixins.styl"
  .icons >>> .swiper-container
    height: 0
    overflow: hidden
    padding-bottom: 50%
    .icon
      width: 25%
      height: 25%
      padding-bottom: 25%
      text-align: center
      float: left
      background: #fff
      & img
        width: 65%
      & p
        color: $darkTextcolor
        font-size: 0.26rem
        margin-top: 0.1rem
        ellipsis()

</style>
